<template>
  <div class="OnePiece" :style="active=='1'?'background: #401117':'background: #2A0A44'">
    <HeaderComponent :needScrollShow="true" title="抢闪耀新星" background='#ffffff' color='#000000' image_='0' size='4.8vw' />
    <div class="top_title" :class="active=='1'?'top_one':'top_two'">

      <div class="shine_icon">
        <img v-if="active=='1'" src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/star_title.png"
          alt="">
        <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_title.png" alt="">
      </div>

      <div class="stage_icon">
        <img v-if="active=='1'" class="back_stage"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_stage_img.png" alt="">
        <img v-else class="back_stage"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_stage_img.png" alt="">

        <img class="back_icon"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_back_btn.png" alt=""
          @click="back_app">
        <img class="SayHello"
          src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_help_icon.png" alt=""
          @click="ejectRule">

        <!-- 关注 -->
        <div class="header_pic">
          <img v-if="active=='1'" class="portrait_kuang" :src="require('@/assets/images/one_piece/level_frame2.png')"
            @click="openProfile(rankfirst.userId)" alt="">
          <img v-else class="portrait_kuang" :src="require('@/assets/images/one_piece/charm_frame2.png')" alt=""
            @click="openProfile(rankfirst.userId)">
          <img class="headPic_" v-if="rankfirst.headPic" :src="rankfirst.headPic" alt="">
          <div v-else class="headPic_2">
            <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/zuowei_img.png" alt="">
          </div>
          <div class="follow_icon" v-if="list.isFollow=='0' && rankfirst.userId" @click="Follow(rankfirst.userId)">
            +关注
          </div>
        </div>
        <!-- 进入房间 -->
        <div v-if="rankfirst.room_id" class="EnterRoom" @click="getintoRoom(rankfirst.room_id.toString())">
          <img src="http://img.xunyinjiaoyou.com/static/xiaochengxu/shouye/index_shengbo.png" alt="波浪">
          <span>跟随进房</span>
        </div>
        <!-- 名字 -->
        <div class="user_list" v-if="rankfirst.userId">
          <span v-if="rankfirst.nickname">{{splice_(rankfirst.nickname)}}</span>

          <img class="sex_iocn" v-if="rankfirst.sex =='1'" :src="require('@/assets/images/one_piece/boy_lab.png')" alt="">
          <img class="sex_iocn" v-else :src="require('@/assets/images/one_piece/girl_lab.png')" alt="">

          <img class="dengji_iocn" v-if="rankfirst.level"
            :src="getImgUrl2(active=='1'?rankfirst.level:rankfirst.trainer_level)" alt="">
        </div>

      </div>
      <!-- 财富魅力切换 -->
      <div class="tab_cur">
        <div @click="tab_active(1)">
          <img v-if="active=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_btn_select.png" alt="" />
          <span :class="active=='1'?'span_tab':''">财富新星</span>
        </div>
        <div @click="tab_active(2)">
          <img v-if="active=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_btn_select.png" alt="" />
          <span :class="active=='2'?'span_tab':''">魅力新星</span>
        </div>
      </div>
      <!-- 倒计时 -->
      <div class="countDown">
        <div class="left_FieldNumber" @click="Switchingtimes(1)">
          <img v-if="active=='1' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_btn_select.png" alt="" />
          <img v-if="active=='1' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_btn_nor.png" alt="" />

          <img v-if="active=='2' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_btn_select.png"
            alt="" />
          <img v-if="active=='2' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_btn_nor.png" alt="" />

          <span v-if="list.activityInfo"
            :style="type=='1'?'color:rgba(255, 255, 255, 1)':'color:rgba(246, 204, 3, 0.45)'">第{{list.activityInfo.number}}场</span>
        </div>

        <div class="center_iocn_time">
          <img v-if="active=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_time_img.png" alt="">
          <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_time_img.png"
            alt="">
          <span>本场结束倒计时</span>
          <span v-if="list.activityInfo.status==0">{{endTime}}</span>
          <span v-if="list.activityInfo.status==1">已结束</span>
          <span v-if="list.activityInfo.status==2">未开始</span>
        </div>

        <div class="right_FieldNumber" @click="Switchingtimes(2)">
          <img v-if="active=='1' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_jilv_btn_select.png" alt="" />
          <img v-if="active=='1' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_jilv_btn_nor.png" alt="" />

          <img v-if="active=='2' && type=='2'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_jilv_btn_select.png" alt="" />
          <img v-if="active=='2' && type=='1'"
            src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_jilv_btn_nor.png" alt="" />

          <span :style="type=='2'?'color:rgba(255, 255, 255, 1)':'color:rgba(246, 204, 3, 0.45)'">历史记录</span>
        </div>
      </div>
    </div>
    <div class="ranking">
      <div class="left_diamond">
        <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/square_img.png" alt="">
      </div>
      <div class="right_diamond">
        <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/square_img.png" alt="">
      </div>

      <div v-if="type=='1' && list.rankList"
        :class="list.rankList.length<3?'_height50vh center_content':'center_content' "
        :style="active=='1'?'background: linear-gradient(0deg, #2F0D13 0%, #6C4027 100%);':'background: linear-gradient(0deg, #56028E 0%, #9E02DF 100%);'">
        <div :class="active=='1'?'back_bag1 speedProgress':'back_bag2 speedProgress'">
          <div class="top_cf">
            <span>本场{{active==1?'财富':'魅力'}}值:{{list.activityInfo.needCharm}}</span>
            <span>距截榜还差:{{list.activityInfo.currentCharm>list.activityInfo.needCharm?'0':list.activityInfo.needCharm-list.activityInfo.currentCharm}}</span>
          </div>
          <div class="Progress">
            <div v-if="list.activityInfo.needCharm"
              :style="'width:'+Progress_(list.activityInfo.needCharm,list.activityInfo.currentCharm)+'%'"></div>
            <img :style="'left:'+ (Progress_(list.activityInfo.needCharm,list.activityInfo.currentCharm)-8) +'%'"
              src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/Progress.png" alt="">
          </div>
        </div>
        <template v-if="list.rankList.length">
          <div v-for="item,index in list.rankList" :key="index" class="rank_pangming">
            <div class="rank_name">
              <img v-if="index == 0"
                src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_rank2_img.png" alt="">
              <img v-else-if="index == 1"
                src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_rank3_img.png" alt="">
              <span v-else>{{index+2}}</span>
            </div>
            <div :class="'header_img border_back'+item.rank" @click="openProfile(item.userId)">
              <img :src="item.headPic" alt="">
            </div>
            <div class="user_miaoshu">
              <span>{{item.nickname}}</span>
              <div>
                <img v-if="item.sex=='1'" :src="require('@/assets/images/one_piece/boy_lab.png')" alt="">
                <img v-else :src="require('@/assets/images/one_piece/girl_lab.png')" alt="">
                <img v-if="item.level" :src="getImgUrl(item.level)" alt="">
              </div>
            </div>
            <div class="pang_rangk">
              <span>{{item.charm}}</span>
              <div v-if="item.room_id" @click="getintoRoom(item.room_id.toString())">
                <img src="http://img.xunyinjiaoyou.com/static/xiaochengxu/shouye/index_shengbo.png" alt="波浪">
              </div>
            </div>
          </div>
        </template>
        <div class="nopress" v-else>
          无人上榜,快冲呀~~
        </div>
      </div>

      <!-- 历史记录 -->
      <div v-if="type=='2'" :class="history_.length<3?'_height50vh center_content':'center_content' "
        :style="active=='1'?'background: linear-gradient(0deg, #2F0D13 0%, #6C4027 100%);':'background: linear-gradient(0deg, #56028E 0%, #9E02DF 100%);'">
        <template v-if="history_.length">
          <div v-for="item,index in history_" :key="index" :class="active=='1'?'ba_active1':'ba_active2'">
            <div class="top_changshu">
              <img v-if="active=='1'"
                src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_chang_img.png" alt="">
              <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_chang_img.png"
                alt="">
              <span>第{{item.number}}场</span>
            </div>
            <div class="center_name">
              <div class="pic_avac">
                <div class="zuoji_header">
                  <img v-if="item.nickname" :src="item.head_pic" alt="">
                  <img v-else src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/shafa_icon.png" alt="">
                </div>
                <div v-if="item.nickname" class="name_list">
                  <span>{{item.nickname}}</span>
                  <div class="pic_header_img">
                    <img v-if="item.sex" :src="require('@/assets/images/one_piece/boy_lab.png')" alt="">
                    <img v-else :src="require('@/assets/images/one_piece/girl_lab.png')" alt="">
                    <!-- <img :src="getImgUrl2(active=='1'?item.level:item.charm_level)" alt=""> -->
                    <img v-if="active=='1'" :src="getImgUrl1(item.level)" alt="">
                    <img v-else :src="getImgUrl1(item.charm_level)" alt="">
                  </div>
                </div>
                <div v-else class="name_list">
                  <span style="line-height:10.8vw">
                    未达标
                  </span>
                </div>
              </div>
              <div class="icon_cin">
                <img v-if="item.nickname &&  active=='1'"
                  src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/icon_image.png" alt="">
                <img v-if="item.nickname &&  active=='2'"
                  src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/icon_image.png" alt="">
              </div>
            </div>
            <div class="bottom_cfzhi">
              <span>消耗{{active==1?'财富':'魅力'}}值: </span>
              <span> {{item.charm}}</span>
            </div>
          </div>
        </template>
        <div class="nopress" v-else>
          无人上榜,快冲呀~~
        </div>
      </div>
    </div>
    <div class="rank_user_pm" v-if="type=='1'"
      :style="active=='1'?'background: linear-gradient(0deg, #FF6749 1%, #FA738F 98%);':'background: linear-gradient(0deg, #5C0295 0%, #B113FA 100%);'">
      <div class="center_user">
        <div class="heade_pic">
          <img v-if="list.myRankInfo" :src="list.myRankInfo.headPic" alt="">
        </div>
        <div class="list_userlianx">
          <span v-if="list.myRankInfo">{{list.myRankInfo.nickname}}</span>
          <span v-if="list.myRankInfo">本轮{{active=='1'?'财富':'魅力'}}:{{list.myRankInfo.myCharm}}</span>
        </div>
        <div class="pm_list">
          <span v-if="list.myRankInfo">{{list.myRankInfo.rankDesc}}</span>
        </div>
      </div>
    </div>
  </div>
  <PopupComponent v-model:show="show">
    <div class="rule_model">
        <div class="top_title_rule">活动规则</div>
        <div class="rule_explain">
          <span>1.每天19:00—23:30限时开放,每天最多产生3个财富新星和魅力新星.</span>
          <span>2.每场最低财富值或魅力值不低于5w.</span>
          <span>3.财富值和魅力值仅计算“日常礼物”,其他礼物不计算.</span>
          <span>4.获得奖励每场结束后实时发放,请注意查收.</span>
        </div>
        <div class="top_title_rule">活动奖励</div>
        <div class="FortuneStar">
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli1.png" alt="">
          <span>财富新星奖励</span>
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli2.png" alt="">
        </div>
        <div class="wealth_gift">
          <div v-for="item,index in wealth" :key="index">
            <div class="gift_box"><img :src="item.icon" alt=""></div>
            <div class="gift_text">
              <span>{{item.name}}</span>
              <span>{{item.prescription}}</span>
            </div>
          </div>
        </div>
        <div class="FortuneStar">
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli1.png" alt="">
          <span>魅力新星奖励</span>
          <img src="https://img.xunyinjiaoyou.com/static/activity/OnePiece/jiangli2.png" alt="">
        </div>
        <div class="wealth_gift">
          <div v-for="item,index in CharmReward" :key="index">
            <div class="gift_box"><img :src="item.icon" alt=""></div>
            <div class="gift_text">
              <span>{{item.name}}</span>
              <span>{{item.prescription}}</span>
            </div>
          </div>
        </div>
      </div>
  </PopupComponent>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import PopupComponent from '@/components/popup_component/PopupComponent.vue'
import { userFollowInsert, activityHourStar, activityHourStarHistory } from '@/api/activity'
import MessageBoxFun from '@/components/message_box/MessageBox' 
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
export default defineComponent({
    components: {
        HeaderComponent,
        PopupComponent
    },
    setup () {
        const data = reactive<Record<string, any>>({
            wealth: [{
                icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/icon_image.png",
                name: "财富新星勋章",
                prescription: '永久'
            }, {
                icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/level_frame.png",
                name: "财富新星头像框",
                prescription: '7天'
            }, {
                icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/WealthNova/efficon.png",
                name: "财富新星进场",
                prescription: '7天'
            }],
            CharmReward: [{
                icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/icon_image.png",
                name: "魅力新星勋章",
                prescription: '永久'
            }, {
                icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/charm_frame.png",
                name: "魅力新星头像框",
                prescription: '7天'
            }, {
                icon: "https://img.xunyinjiaoyou.com/static/activity/OnePiece/GlamourStar/car.png",
                name: "魅力新星进场",
                prescription: '7天'
            }],
            active: 1, //1财富新星2魅力新星
            type: 1, //1场数2历史记录

            list: {
                activityInfo: {
                    status: 0
                },
                myRankInfo: {},
                rankList: [],
            },
            rankfirst: {},
            show: false,
            endTime: '',
            history_: [],
            show_zi: false,
        })
        const back_app = ():void => {
            if ((window as any).isiOS) {
                (window as any).webkit.messageHandlers.backAction.postMessage({});
            } else {
                (window as any).app.backAction();
            }
        }
        const openProfile = (user: string):void => {
            if (user) {
                if ((window as any).isiOS) {
                    (window as any).webkit.messageHandlers.openProfile.postMessage({
                        userId: user,
                    });
                } else {
                    (window as any).app.openProfile(user);
                }
            } else {
                MessageBoxFun({
                    message: '暂无人上榜',
                    delay: 1500
                })
            }
        }
        const Follow = async (followId: string):Promise<void> => {
            const arys = {
                followId: followId,
            }; //参数
            const dataRes = await userFollowInsert(arys)
            if (dataRes.data.status == 0) {
                data.list.isFollow = '1';
            }
            MessageBoxFun({
                message: dataRes.data.text,
                delay: 1500
            });
        }
        const getintoRoom = (roomId: string):void => {  
            if ((window as any).isiOS) {
                (window as any).webkit.messageHandlers.getIntoRoom.postMessage({
                    roomId: roomId,
                });
            } else {
                (window as any).app.getIntoRoom(roomId);
            }
        }
        const splice_= (value: string): string => {
            let slice2 = "";
            if (value.length > 5) {
                slice2 = value
                slice2 = slice2.slice(0, 6)
                return slice2 + '...';
            } else {
                return value
            }
        }
        const getImgUrl2 = (img: string):string => {
            if (data.active == '1') {
                const imgurl: string = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/level" + img + ".png"
                return imgurl;
            } else {
                const imgurl: string = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/charm3/charm" + img + ".png"
                return imgurl;
            }
        }
        const tab_active = (active: number):void => {
            data.active = active
            if (data.type == '1') {
                levepage(data.active);
            } else {
                hourStarHistory(data.active)
            }
        }
        const levepage = async (active: number):Promise<void> => {
            const arys = {
                type: active,
            }; //参数
            const dataRes = await activityHourStar(arys)
            if (dataRes.data.status == 0) {
                data.list = dataRes.data.result;
                if (dataRes.data.result.rankList.length) {
                    const rankfirst = dataRes.data.result.rankList.shift();
                    data.rankfirst = rankfirst;
                }
                minReturn(Math.abs(dataRes.data.result.activityInfo.countdown))
            } else {
                data.list = {}
                MessageBoxFun({
                    message: dataRes.data.text,
                    delay: 1500
                });
            }
        }
        const formatBit = (val: number):string | number => {
            val = +val
            return val > 9 ? val : '0' + val
        }
        const formatSeconds = (time: number): any => {
            if (time <= 0) {
                clearInterval(data.time_t)
                data.type == '1' ? levepage(data.active) : hourStarHistory(data.active);
            } else {
                let min = Math.floor(time % 3600)
                let val = formatBit(Math.floor(time / 3600)) + ':' + formatBit(Math.floor(min / 60)) + ':' + formatBit(time % 60) + ''
                return val
            }
        }
        const hourStarHistory = async (active: number): Promise<void> => {
            const arys = {
                type: active,
            }; //参数
            const dataRes = await activityHourStarHistory(arys)
            if (dataRes.data.status == 0) {
                data.history_ = dataRes.data.result;
            } else {
                MessageBoxFun({
                    message: dataRes.data.text,
                    delay: 1500
                });
            }
        }
        const minReturn = (time_: number):void => {
            let time = time_
            clearInterval(data.time_t)
            data.time_t = setInterval(() => {
            time--
            // this.formatSeconds(time)
            data.endTime = formatSeconds(time)
            if (time <= 0) {
                clearInterval(data.time_t)
            }
            }, 1000)
        }
        const Switchingtimes = (type: string):void => {
            data.type = type
            if (type == '1') {
                levepage(data.active);
            } else {
                hourStarHistory(data.active)
            }
        }
        const Progress_ = (need: number, my_Charm: number): number => {
            if (my_Charm > need) {
                return 100
            } else {
                const num = (my_Charm / need) * 100;
                num.toFixed(2)
                return num
            }

        }
        const getImgUrl = (img: string): string => {
            let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/level" + img + ".png"
            return imgurl;
        }
        const getImgUrl1 = (img: string):string => {
            if (data.active == '1') {
                let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/level3/" + img + ".png"
                return imgurl;
            } else {
                let imgurl = "https://xunyinjiaoyou.oss-cn-qingdao.aliyuncs.com/static/charm3/" + img + ".png"
                return imgurl;
            }
        }
        const ejectRule = ():void => {
            data.show = true;
        }
        levepage(data.active);
        const url = location.href;
        if (data.active === url.split("?")[1]) {
            data.active = url.split("?")[1].split("=")[1];
        } else {
            data.active = '1'
        }
        return {
            getImgUrl2,
            splice_,
            tab_active,
            Switchingtimes,
            ...toRefs(data),
            getintoRoom,
            getImgUrl1,
            getImgUrl,
            Progress_,
            back_app,
            ejectRule,
            Follow,
            openProfile
        }
    }
})
</script>

<style lang="less" scoped>
@import './OnePiece.less';
</style>